<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" count="54341">
            <template slot="charts">
              <span style="font-size: 12px"
                >周同比&nbsp;&nbsp; 46%&nbsp;
                <i class="icon" style="font-size: 12px; color: green"
                  ></i
                ></span
              >
            </template>
            <template slot="foot">
              <span>日销售额￥ 1235</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="12114">
            <template slot="charts">
              <LineCharts />
            </template>

            <template slot="foot">
              <span>日访问量 4545</span>
            </template></Detail
          >
        </el-card></el-col
      >
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="4341">
            <template slot="charts">
              <Histogram />
            </template>
            <template slot="foot">
              <span>转化率 65%</span>
            </template></Detail
          >
        </el-card></el-col
      >
      <el-col :span="6">
        <el-card>
          <Detail title="运营效果" count="5412">
            <template slot="foot">
              <span style="font-size: 12px"
                >周同比&nbsp;&nbsp; 48.5%&nbsp;
                <i class="icon" style="font-size: 12px; color: green"
                  ></i
                ></span
              >&nbsp;&nbsp;
              <span style="font-size: 12px; margin-left: 15px"
                >日同比&nbsp;&nbsp; 18.5%&nbsp;
                <i class="icon" style="font-size: 12px; color: red"></i></span
              >
            </template></Detail
          >
        </el-card></el-col
      >
    </el-row>
  </div>
</template>

<script>
import Detail from "./detail";
import LineCharts from "./detail/LineCharts";
import Histogram from "./detail/histogram";
export default {
  components: {
    Detail,
    LineCharts,
    Histogram,
  },
};
</script>

<style>
</style>